import React from 'react';
import { View } from 'react-native';
import Svg, { Rect } from 'react-native-svg';

export function ProgressBarBySport({
    progress = 0.6,
    width = 300,
    height = 20,
    color = '#6a5acd',
    backgroundColor = 'rgba(106, 90, 205, 0.2)',
}) {
    const currentWidth = progress * width;
    return (
        <View>
            <Svg width={width} height={height}>
                <Rect x="0" y="0" width={width} height={height} fill={backgroundColor} />
                <Rect x="0" y="0" width={currentWidth} height={height} fill={color} />
            </Svg>
        </View>
    );
}
